<template>
  <div :class="keyboardClass"></div>
</template>
<script>
import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'
import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文字库
export default {
  name: 'SimpleNumberKeyboard',
  props: {
    keyboardClass: {
      default: 'simple-number-keyboard',
      type: String,
    },
    maxLength: {default: ''},
  },
  data: () => ({
    keyboard: null,
    displayDefault: {
      '{bksp}': 'backspace',
      '{lock}': '切换',
      '{enter}': '←┘enter',
      '{tab}': 'tab',
      '{shift}': 'shift',
      '{change}': '中文',
      '{space}': ' ',
      '{clear}': '清空',
      '{close}': '关闭',
      '{reset}': '重置'
    }
  }),
  mounted() {
    this.keyboard = new Keyboard(this.keyboardClass, {
      onChange: this.onChange,
      onKeyPress: this.onKeyPress,
      layoutCandidates: layout.layoutCandidates,
      layout: {
        shift: [
          '1 2 3',
          '4 5 6',
          '7 8 9',
          'X 0 {clear}',
          '{bksp} {reset}',
        ],
        // shift布局{tab}-{shift}-{change}
        default: [
          '1 2 3',
          '4 5 6',
          '7 8 9',
          'X 0 {clear}',
          '{bksp} {reset}',
        ],
      },
      // 按钮展示文字
      display: {...this.displayDefault, '{bksp}': '删除', '{space}': '空格','{enter}':'提交'},
      // 按钮样式
      buttonTheme: [
        {
          class: 'hg-red close',
          buttons: '{close}',
        },
        {
          class: 'change',
          buttons: '{change}',
        },
      ],
      // 输入限制长度
      maxLength: this.maxLength,
    })
  },
  methods: {
    onChange(input) {
      this.$emit('onChange', input) // 输入值向外传递
    },

    // 重写清空按钮
    onChangeKey() {
      this.keyboard.setInput('')
      this.$emit('empty')
    },

    // @focus 触发时赋值 封装组件调用
    onChangeFocus(value) {
      this.keyboard.setInput(value)
    },

    // 点击键盘
    onKeyPress(button, $event) {
      // 点击关闭
      if (button === '{close}') {
        // 子组件调用父组件的关闭按钮方法
        this.$emit('keyboardClose')
        return false
      } else if (button === '{change}') {
        // 切换中英文输入法
        if (this.keyboard.options.layoutCandidates !== null) {
          this.$set(this.displayDefault, '{change}', '英文')
          // 切换至英文
          this.keyboard.setOptions({
            layoutCandidates: null,
            display: this.displayDefault,
          })
        } else {
          // 切换至中文
          this.$set(this.displayDefault, '{change}', '中文')
          this.keyboard.setOptions({
            layoutCandidates: layout.layoutCandidates,
            display: this.displayDefault,
          })
        }
      } else if (button === '{clear}') {
        this.onChangeKey();
        this.$emit('onKeyPress', button);
      } else {
        let value = $event.target.offsetParent.parentElement.children[0].children[0].value;
        // 输入框有默认值时，覆写
        if (value) {
          this.keyboard.setInput(value)
        }
        this.$emit('onKeyPress', button)
      }
      if (button === '{shift}' || button === '{lock}') this.handleShift()
    },

    // 切换shift/默认布局
    handleShift() {
      let currentLayout = this.keyboard.options.layoutName
      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
      this.keyboard.setOptions({
        layoutName: shiftToggle,
      })
    },
  },
}
</script>
<!--//这块样式可以根据自己的需求调整-->
<style lang="scss" scoped>

:deep(.hg-row) {
  background: white !important;
  width: 100% !important;
  margin-bottom: 100px;
  height: 90px;

  &:last-child {
    margin-bottom: 0 !important;
  }

  .hg-button {
    overflow: hidden;
    padding: 20px 20px;
    height: 100%;
    background: rgba(92, 173, 255, 0.3);
    span {
      width: 100%;
      height: 100%;
      display: flex;
      align-self: center;
      align-items: center;
      font-size: 48px;
      text-align: center;
      justify-content: center;
    }
  }
}

.hg-candidate-box {
  position: fixed;
  width: 100%;
  font-size: 42px;
  background: rgba(256, 256, 256, 1);
  z-index: 9999;

  .hg-candidate-box-list {
    .hg-candidate-box-list-item {
      padding: 0 20px;
    }
  }
}

.hg-theme-default {
  width: 100%;
  left: 0;
  position: fixed;
  bottom: 0;
  background: #FFFFFF !important;

  .hg-button {
    &.hg-red {
      background: #db3e5d;
      color: white;

      &.close {
        max-width: 200px;
      }
    }

    &.change {
      max-width: 200px;
    }
  }
}
</style>

